<template>
  <el-dialog
    title="客服中心"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="70%"
    top="5%"
    @close="$emit('update:visible', false)"
  >
    <!-- 引入客服中心组件 -->
    <CustomerService/>

    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import CustomerService from './CustomerService.vue'

export default {
  name: 'CustomerServiceDialog',
  components: {
    CustomerService
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  // 响应式调整对话框宽度
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}

/* 适配对话框内边距 */
::v-deep .el-dialog__body {
  padding: 0;
}

/* 适配小屏幕 */
@media (max-width: 768px) {
  ::v-deep .el-dialog {
    max-width: 90% !important;
  }
}
</style>
